<template>
  <div class="detail">
    <Header title="账单详情" />
    <div class="card">
      <div class="type">
        <span
          :class="{
            expense: detail.pay_type == 1,
            income: detail.pay_type == 2
          }"
        >
          <i
            class="iconfont"
            :class="detail.type_id ? typeMap[detail.type_id].icon : 0"
          />
        </span>
        <span>{{ detail.type_name || '' }}</span>
      </div>
      <div class="amount expense" v-if="detail.pay_type == 1">
        -{{ detail.amount }}
      </div>
      <div class="amount incom" v-else>+{{ detail.amount }}</div>
      <div class="info">
        <div class="time">
          <span>记录时间</span>
          <span>{{ formatter(Number(detail.date)) }}</span>
        </div>
        <div class="remark">
          <span>备注</span>
          <span>{{ detail.remark || '-' }}</span>
        </div>
      </div>
      <div class="operation van-hairline--top">
        <span class="van-hairline--right" @click="deleteDetail"
          ><van-icon name="delete" />删除</span
        >
        <span class="edit" @click="openModal"
          ><van-icon name="edit" />编辑</span
        >
      </div>
      <PopAdd
        v-if="detail.id"
        ref="popAddRef"
        :detail="detail"
        @refresh="getDetail"
      />
    </div>
  </div>
</template>

<script>
import PopAdd from '../components/PopAdd.vue'

import { onMounted, reactive, toRefs, ref } from 'vue'
import { typeMap } from '@/utils/typeMap'
import { get, post } from '@/utils/request'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { Toast, Dialog } from 'vant'
export default {
  name: 'Detail',
  components: {
    PopAdd
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const { id } = route.query
    const popAddRef = ref(null)
    const state = reactive({
      detail: {},
      typeMap
    })
    onMounted(() => {
      getDetail()
    })
    // 获取账单详情方法
    const getDetail = async () => {
      const { data } = await get(`/bill/detail`, { id })
      state.detail = data
    }

    const formatter = (time) => {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
    // 删除方法
    const deleteDetail = () => {
      Dialog.confirm({
        title: '删除',
        message: '确认删除账单？'
      })
        .then(async () => {
          const { data } = await post('/bill/delete', { id })
          Toast.success('删除成功')
          router.back()
        })
        .catch(() => {})
    }
    // 打开编辑弹窗方法
    const openModal = () => {
      popAddRef.value.toggle()
    }
    return {
      ...toRefs(state),
      popAddRef,
      getDetail,
      formatter,
      deleteDetail,
      openModal
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color1);
  padding: 12px 24px 0 24px;
}
.card {
  border-radius: 12px;
  background-color: var(--bg-color4);
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .type {
    padding: 24px 0 12px 0;
    span:nth-of-type(1) {
      display: inline-block;
      width: 22px;
      height: 22px;
      color: var(--bg-color4);
      border-radius: 50%;
      text-align: center;
      line-height: 20px;
      margin-right: 8px;
    }
    .expense {
      background-color: var(--bg-color3);
    }
    .income {
      background-color: var(--bg-color3);
    }
  }
  .amount {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
  }
  .info {
    width: 100%;
    font-size: 14px;
    text-align: left;
    .time {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 12px;
      span:nth-of-type(1) {
        flex: 3;
        color: var(--text-color2);
      }
      span:nth-of-type(2) {
        flex: 9;
      }
    }
    .remark {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 12px;
      span:nth-of-type(1) {
        flex: 3;
        color: var(--text-color2);
      }
      span:nth-of-type(2) {
        flex: 9;
        color: var(--text-color1);
      }
    }
  }
  .operation {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 16px;
    .van-icon {
      margin-right: 4px;
    }
    span {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      flex: 1;
    }
    span:nth-of-type(1) {
      color: red;
    }
  }
}
.edit {
  color: var(--text-color5);
}
</style>
